
<template>
    <div class="navbar clearfix">
       <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item  to='/'>
            首页
            </el-breadcrumb-item>
                     <el-breadcrumb-item v-for="item in breadlist":key="item.path"  :to="item.path===''?'/':
                     item.path==='/user'?'/user/page1':item.path==='/new'?'/new/page3':item.path==='/userkey'?'/userkey/userkeys':item.path">
                     {{item.meta.title }}
                     </el-breadcrumb-item>
                 </el-breadcrumb>
<!--       <el-breadcrumb-item v-for="(item,index) in breadlist"  :key="index" :to="{ path: item.path }">

       {{item.meta.title}}{{item.path}}</el-breadcrumb-item> -->

       </el-breadcrumb>
    </div>
</template>

<script>
    export default {
        name: 'Navbar',
        data() {
            return {
                breadlist: []
            }
        },
        created(){
                   this.getBreadcrumb()
               },


        watch:{
           $route(e){
             this.getBreadcrumb()
             //console.log("ss"+e);
           }
         },

         methods:{
           getBreadcrumb(){
             let matched = this.$route.matched;
             this.breadlist=matched
            //console.log("SS"+this.breadlist);
           },
           }

    }
</script>

<style space>
.el-breadcrumb__separator{
  color: #542906;
}

</style>
